<template>
  <div class="group-info-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="群聊信息"
      left-arrow
      @click-left="$emit('close')"
    />
    
    <!-- 群聊基本信息 -->
    <div class="group-basic-info">
      <div class="group-avatar-container">
        <div class="group-avatar">
          <img v-for="(member, index) in groupInfo.members.slice(0, 3)" :key="index" :src="member.avatar" :alt="member.name" />
        </div>
      </div>
      <div class="group-name">{{ groupInfo.name }}</div>
      <div class="group-id">群号：{{ groupId }}</div>
      <div class="group-qrcode" @click="showQrcode">
        <van-icon name="qr" size="20" />
        <span>群二维码</span>
      </div>
    </div>
    
    <!-- 群聊公告 -->
    <div class="group-section">
      <div class="section-header">
        <span>群公告</span>
        <van-icon name="arrow" v-if="groupInfo.isAdmin" @click="editAnnouncement" />
      </div>
      <div class="section-content announcement" v-if="groupInfo.announcement">
        {{ groupInfo.announcement }}
      </div>
      <div class="section-content empty-tip" v-else>
        暂无群公告
      </div>
    </div>
    
    <!-- 群聊管理 -->
    <div class="group-section" v-if="groupInfo.isAdmin">
      <div class="section-header">
        <span>群管理</span>
      </div>
      <div class="section-content">
        <div class="setting-item" @click="manageMember">
          <van-icon name="friends-o" size="20" />
          <span>群成员管理</span>
          <van-icon name="arrow" />
        </div>
        <div class="setting-item" @click="groupPermission">
          <van-icon name="setting-o" size="20" />
          <span>群权限设置</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    
    <!-- 群成员列表 -->
    <div class="group-section">
      <div class="section-header">
        <span>群成员 ({{ groupInfo.members.length }})</span>
        <span class="view-all" @click="viewAllMembers">查看全部</span>
      </div>
      <div class="section-content">
        <div class="member-grid">
          <div class="member-item" v-for="(member, index) in groupInfo.members.slice(0, 8)" :key="index" @click="viewMemberProfile(member.id)">
            <div class="member-avatar">
              <img :src="member.avatar" :alt="member.name" />
              <div class="member-role" v-if="member.role === 'admin'">管理员</div>
              <div class="member-role owner" v-if="member.role === 'owner'">群主</div>
            </div>
            <div class="member-name">{{ member.name }}</div>
          </div>
          <div class="member-item add-member" @click="inviteMember" v-if="groupInfo.members.length < 200">
            <div class="add-icon">
              <van-icon name="plus" size="24" />
            </div>
            <div class="member-name">邀请</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 群聊设置 -->
    <div class="group-section">
      <div class="section-content">
        <div class="setting-item">
          <span>消息免打扰</span>
          <van-switch v-model="muted" size="24px" />
        </div>
        <div class="setting-item">
          <span>置顶聊天</span>
          <van-switch v-model="pinned" size="24px" />
        </div>
        <div class="setting-item" @click="clearHistory">
          <span>清空聊天记录</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    
    <!-- 退出群聊 -->
    <div class="group-action">
      <van-button type="danger" block @click="leaveGroup">{{ groupInfo.isOwner ? '解散群聊' : '退出群聊' }}</van-button>
    </div>
    
    <!-- 群二维码弹窗 -->
    <van-popup v-model="showQrcodePopup" round>
      <div class="qrcode-popup">
        <div class="qrcode-title">群聊二维码</div>
        <div class="qrcode-image">
          <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=group_123456" alt="群聊二维码" />
        </div>
        <div class="qrcode-tip">扫一扫上面的二维码，加入群聊</div>
        <van-button type="primary" block @click="saveQrcode">保存二维码</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'GroupInfo',
  props: {
    groupId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      groupInfo: {
        name: '',
        announcement: '',
        isAdmin: false,
        isOwner: false,
        members: []
      },
      muted: false,
      pinned: false,
      showQrcodePopup: false
    }
  },
  created() {
    this.fetchGroupInfo()
  },
  methods: {
    // 获取群聊信息
    fetchGroupInfo() {
      // 模拟API请求
      setTimeout(() => {
        this.groupInfo = {
          name: '【群聊】没想好名字',
          announcement: '欢迎加入本群，请大家遵守群规则，友好交流！',
          isAdmin: true,
          isOwner: Math.random() > 0.5,
          members: [
            { id: 1, name: 'momo', avatar: 'https://i.pravatar.cc/100?img=1', role: 'owner' },
            { id: 2, name: '悟空', avatar: 'https://i.pravatar.cc/100?img=2', role: 'admin' },
            { id: 3, name: '用户3', avatar: 'https://i.pravatar.cc/100?img=3', role: 'member' },
            { id: 4, name: '用户4', avatar: 'https://i.pravatar.cc/100?img=4', role: 'member' },
            { id: 5, name: '用户5', avatar: 'https://i.pravatar.cc/100?img=5', role: 'member' },
            { id: 6, name: '用户6', avatar: 'https://i.pravatar.cc/100?img=6', role: 'member' },
            { id: 7, name: '用户7', avatar: 'https://i.pravatar.cc/100?img=7', role: 'member' },
            { id: 8, name: '用户8', avatar: 'https://i.pravatar.cc/100?img=8', role: 'member' },
            { id: 9, name: '用户9', avatar: 'https://i.pravatar.cc/100?img=9', role: 'member' }
          ]
        }
        
        this.muted = Math.random() > 0.5
        this.pinned = Math.random() > 0.5
      }, 300)
    },
    
    // 显示群二维码
    showQrcode() {
      this.showQrcodePopup = true
    },
    
    // 保存二维码
    saveQrcode() {
      this.$toast('二维码已保存到相册')
      this.showQrcodePopup = false
    },
    
    // 编辑群公告
    editAnnouncement() {
      this.$dialog.prompt({
        title: '编辑群公告',
        message: '请输入新的群公告内容',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputValue: this.groupInfo.announcement
      }).then(value => {
        this.groupInfo.announcement = value
        this.$toast('群公告已更新')
      }).catch(() => {
        // 取消操作
      })
    },
    
    // 管理群成员
    manageMember() {
      this.$toast('群成员管理功能开发中')
    },
    
    // 群权限设置
    groupPermission() {
      this.$toast('群权限设置功能开发中')
    },
    
    // 查看所有成员
    viewAllMembers() {
      this.$toast('查看所有成员功能开发中')
    },
    
    // 查看成员资料
    viewMemberProfile(memberId) {
      this.$router.push(`/user/${memberId}`)
    },
    
    // 邀请成员
    inviteMember() {
      this.$toast('邀请成员功能开发中')
    },
    
    // 清空聊天记录
    clearHistory() {
      this.$dialog.confirm({
        title: '清空聊天记录',
        message: '确定要清空与该群聊的聊天记录吗？',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$toast('聊天记录已清空')
      }).catch(() => {
        // 取消操作
      })
    },
    
    // 退出/解散群聊
    leaveGroup() {
      const action = this.groupInfo.isOwner ? '解散' : '退出'
      this.$dialog.confirm({
        title: `${action}群聊`,
        message: `确定要${action}该群聊吗？`,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$toast(`已${action}群聊`)
        this.$emit('close')
        this.$router.push('/message')
      }).catch(() => {
        // 取消操作
      })
    }
  }
}
</script>

<style scoped>
.group-info-container {
  height: 100%;
  background-color: #f7f8fa;
  overflow-y: auto;
}

.group-basic-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

.group-avatar-container {
  margin-bottom: 15px;
}

.group-avatar {
  position: relative;
  width: 80px;
  height: 80px;
}

.group-avatar img {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}

.group-avatar img:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 3;
}

.group-avatar img:nth-child(2) {
  top: 0;
  right: 0;
  z-index: 2;
}

.group-avatar img:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.group-name {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}

.group-id {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.group-qrcode {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.group-qrcode .van-icon {
  margin-right: 5px;
}

.group-section {
  margin-top: 10px;
  background-color: #fff;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
}

.view-all {
  color: #999;
  font-size: 14px;
}

.section-content {
  padding: 15px;
}

.announcement {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.empty-tip {
  color: #999;
  font-size: 14px;
  text-align: center;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 16px;
}

.setting-item .van-icon {
  color: #999;
}

.setting-item + .setting-item {
  border-top: 1px solid #f5f5f5;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.member-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.member-role {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background-color: #ff9800;
  color: #fff;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 8px;
}

.member-role.owner {
  background-color: #ff2442;
}

.member-name {
  font-size: 12px;
  color: #333;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-icon {
  width: 50px;
  height: 50px;
  background-color: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.group-action {
  margin: 20px 15px;
}

.qrcode-popup {
  width: 280px;
  padding: 20px;
  text-align: center;
}

.qrcode-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
}

.qrcode-image {
  margin-bottom: 15px;
}

.qrcode-image img {
  width: 200px;
  height: 200px;
}

.qrcode-tip {
  font-size: 14px;
  color: #999;
  margin-bottom: 15px;
}
</style> 